import React from 'react'
import {Row,Col, Table, Input, Popconfirm,Button,  Dropdown,Icon ,Menu, Modal} from 'antd';
import Search from './Link/Search'
import AddLink from './Link/AddLink'
import DropOption from './Link/DownMenu'
import reqwest from 'reqwest';

import './Link/LinkMana.less';

import {linkList,deleteLink} from '../services/linkMana'

const confirm = Modal.confirm;

class EditableTable extends React.Component {
  state = {
    data:[],
    searchData:[],
    modelVisible:false,
    rowData:'2',
    pagination: {},
    loading: false,
    status:'create',
    result:''
  }
  handleTableChange = (pagination, filters, sorter) => {
    
    const pager = { ...this.state.pagination };
   
    pager.current = pagination.current;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters,
    });
  }
  fetch = (params = {}) => {
    this.setState({ loading: true });
    const data = {
      results:10,
      ...params
    }
    linkList(data).then(data =>{
      const pagination = { ...this.state.pagination };
      pagination.total = data.total;
      pagination.pageSize = data.per_page
      
      this.setState({
        loading: false,
        data: data.data,
        searchData:data.data,
        pagination,
      })
    })
    
  }
  componentDidMount() {
    const data = {
      results:10,
      page:1
    }
    this.fetch(data)
    
    window.addEventListener('resize', this.onWindowResize)
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.onWindowResize)
  }
  onWindowResize=()=>{
    const result = (document.body.clientHeight - 250)/50
    const data ={
      page:1,
      results:parseInt(result)
    }
    // this.fetch(data)
    console.log(data)
  }
  search =(val) =>{
     
  }

  update=(row,status)=>{
    this.setState({
      modelVisible:true,
      rowData:row,
      status:status?status:'create'
    })
  }
  resetTable=()=>{
    const pager = { ...this.state.pagination };
    pager.current = 1;
    this.setState({
      pagination: pager,
    });
    this.fetch({
      current:1
    });
  }
  handleModelCancel = () => {
    this.setState({
      modelVisible: false,
    });
  }
  deleteLink = (id) => {
    deleteLink(id).then(data=>{
      this.fetch();
    })
    // reqwest({
    //   url:`http://admin.mapboom.cn/portal/v1.0/outside_link?id=${id}`,
    //   method: 'delete',
    //   type: 'json',
    // }).then((data) => {
    //   this.fetch();
    // });
  }
  
  render() {
  const handleMenuClick = (record, e) => {
    if (e.key === '1') {
      this.update(record,'update');
    } else if (e.key === '2') {
      let that = this;
      confirm({
        title: `你确定要删除${record.title}吗?`,
        onOk () {
          that.deleteLink(record.id)
        },
      })
    }
  }
    const columns = [
    { title: '链接', dataIndex: 'link',width:'12%' },
    { title: '权重', dataIndex: 'weight',width:'12%' },
    { title: '标题', dataIndex: 'title' ,width:'12%'},
    { title: 'email', dataIndex: 'email' ,width:'12%'},
    { title: 'Logo', dataIndex: 'logo' ,width:'12%'},
    { title: '链接状态', dataIndex: 'link_status' ,width:'12%'},
    { title: '链接分组', dataIndex: 'link_group' ,width:'12%'},
    { title: 'Action', dataIndex: '',width:'12%' , 
      render: (text, record) => {
        return <DropOption onMenuClick={e => handleMenuClick(record, e)} menuOptions={[{ key: '1', name: '修改' }, { key: '2', name: '删除' }]} />
      }},
  ];

  return (
    <div>
      <h2 className="link-title">友链管理</h2>
      <div>
      <Row type="flex" justify="space-between" style={{"marginBottom": "10px"}}>
        <Col xl={{ span: 18 }} md={{ span:16 }}>
          <Search search={this.search.bind(this)} />
        </Col>
        <Col xl={{ span: 6 }} md={{ span: 8 }} style={{"textAlign":"right"}}>
          <Button onClick={this.update}>添加</Button>
        </Col>
      </Row>
      <AddLink 
          status={this.state.status} 
          rowData={this.state.rowData} 
          handleModelCancel={this.handleModelCancel.bind(this)} 
          visible={this.state.modelVisible} 
          resetTable={this.resetTable.bind(this)}
          />
        <Table columns={columns} 
              size="middle"
               rowKey={record => record.id}
              dataSource={this.state.data}
              pagination={this.state.pagination}
              loading={this.state.loading}
              onChange={this.handleTableChange} 
              bordered 
                 />
      </div>

    </div>
  )
  }
}

export default EditableTable
